<template>
	<view class="partmain">
		<template v-if="list.length === 0">
			<nodata></nodata>
		</template>
		<template v-else>
			<view class="pitem" v-for="item in list" :key="item.partId">
				<image class="cover" mode="aspectFill" :src="item.url"></image>
				<view class="main">
					<view class="mname" v-text="item.partMainName"></view>
					<view class="sname" v-if="item.partSubName" v-text="item.partSubName"></view>
					<view class="price" v-text="'¥ ' + item.partPrice"></view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import nodata from '../../common/nodata/index.vue'; 
	import { apiBase, get_part_list } from '../../request/index.js'
	export default {
		components:{nodata},
		data() {
			return {
				list : []
			}
		},
		onLoad() {
			this.get_part_list();
		},
		methods: {
			async get_part_list () {
				try{
					const res = await get_part_list();
					if(res.success){
						this.list = res.data.map(d => {
							const part = { ...d };
							part.url = apiBase + part.partImg.url;
							return part;
						});
					}
				}catch(e){
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style>
page{
	background-color: rgb(233, 233, 233);
}

.partmain{
	padding: 25rpx 25rpx 40rpx;
}

.pitem{
	height: 200rpx;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	position: relative;
	padding: 25rpx;
	margin-bottom: 25rpx;
	display: flex;
}
.pitem .cover{
	width: 200rpx;
	height: 200rpx;
}

.pitem .main{
	width: calc(100% - 200rpx);
	margin-left: 30rpx;
	position: relative;
}

.pitem .main .mname{
	font-weight: bold;
	overflow: hidden;
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.pitem .main .sname{
	font-size: 13px;
	color: #909399;
	margin-top: 15rpx;
	overflow: hidden;
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.pitem .main .price{
	margin-top: 15rpx;
	color: rgb(255, 79, 0);
	font-size: 14px;
	position: absolute;
	bottom: -5rpx;
	left: 0;
	font-weight: bold;
}
</style>
